<template>
  <div>
    <div style="font-size:18px;">流水记录</div>
    <hr>
    <br>
    <div class="filter-container">

      <div class="left filter-item">
      <!-- <el-select clearable v-model="listQuery.param.schoolId" placeholder="请选择学校">
          <el-option v-for="item in schoolOptions" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
      </el-select> -->
      </div>
      <!-- <div class="left filter-item"> -->
        <!-- <el-select clearable v-model="listQuery.param.shopId" placeholder="店铺名字">
            <el-option v-for="item in shopOptions" :key="item.id" :label="item.shopName" :value="item.id">
            </el-option>
        </el-select> -->
        <el-input :disabled="rid!=1" @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="店铺名" v-model="listQuery.param.shopName">
        </el-input>
      <!-- </div> -->
      <div class="left filter-item">
          <el-date-picker
            style="width: 200px;display: inline-block;"
            v-model="listQuery.param.startTime"
            type="date"
            placeholder="选择开始时间">
          </el-date-picker>
      </div>
      <div class="left filter-item">
          <el-date-picker
            style="width: 200px;display: inline-block;"
            v-model="listQuery.param.endTime"
            type="date"
            placeholder="选择结束时间">
          </el-date-picker>
      </div>

      <el-button class="filter-item" style="margin-left: 30px;" type="primary" icon="search" @click="handleFilter">搜索</el-button> 
      <el-button class="filter-item" type="primary" icon="document" @click="handleDownload">导出</el-button>
    </div>

    <el-table :data="list"
      stripe border
      style="width: 100%">
      <el-table-column prop="username" label="购买人名字" ></el-table-column>
      <el-table-column prop="price" label="流水金额" ></el-table-column>
      <el-table-column align="center" label="流水类型" >
        <template scope="scope">
          <span>{{scope.row.type | types}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="orderNo" label="订单号" ></el-table-column>
      <el-table-column prop="shopName" label="商铺名" ></el-table-column>
      <el-table-column prop="createDateName" label="创建订单时间" >
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.pageNumber"
        :page-sizes="[10,20,30, 50]" :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
    
  </div>
</template>
<script>
    import $ from 'jquery';
    import Vue from 'vue';
    import { parseTime1, parseTime } from '../../utils'
    import { orderList } from '../../utils/resourse';

  export default {
    data() {
        return {
          schoolValue: '',
          shopValue:'',
          list: null,
          total: null,
          schoolOptions: [],
          shopOptions: [],
          num1: 100,
          listLoading: false,
          listQuery: {
            pageNumber: 1,
            pageSize: 10,
            param: {
                schoolId: '',
                shopType: '',
                shopId:'',
                shopName: '',
                phone: '',
                startTime: null,
                endTime: null,
            },
          },
          shop: null,
          school: null,
          rid: '',
          userData: null,
          applyCashDialog: false,
          accountOptions: [
            {id: 1,name: '支付宝'},
            {id: 2,name: '微信'},
            {id: 3,name: '银行卡'},
          ],
          applyForm: {
            money: '',
            accountType: null,
            openingBank: '',

          }
        };
    },
    //  1.购物流水  2.提现流水    3   退货类型
    filters: {
        types(str) {
          let aa = {
            1: "购物流水",
            2: "提现流水",
            3: "退货类型",    
          }
          return aa[str]  
        },
    },
    created(){
      this.rid = localStorage.getItem('rid');
      this.school = JSON.parse(localStorage.getItem('school'));
      this.shop = JSON.parse(localStorage.getItem('shop'));
      this.userData = JSON.parse(localStorage.getItem('userData'));
      if(this.shop){
        this.listQuery.param.shopName = this.shop.shopName
      }
      this.getschoollist();
      // this.getList();
    }, 
    mounted(){
        var self=this;
        this.getList()
        this.getshoplist()
    },
    methods: {
      getshoplist(){
        let self = this;
        let _data = {
            pageNumber: 1,
            pageSize: 10000,
        }
        self.myajax("/shop/list",_data,function(res){
            console.log(res)
            if(res.code==1000){
                self.shopOptions=res.data.list;
            }
        });
      },
      getschoollist(){
        let self = this;
        let _data = {
            pageNumber: 1,
            pageSize: 10000,
        }
        self.myajax("/school/list",_data,function(res){
            console.log(res)
            if(res.code==1000){
                self.schoolOptions=res.data.list;
            }
        });
      },
      getList(){
        let self = this
        console.log(orderList)
        self.myajax("/water_bill/list",self.listQuery,function(res){
            console.log(res)
            console.log(333)
            self.list = res.data.list
            self.total = res.data.total
          });
      },
      handleApplyCash() {
        this.applyCashDialog = true;
      },
      confirmApply() {

      },
      indexMethod(index) {
        return index + 1;
      },
      handleFilter() {       //条件搜索
        this.listQuery.pageNumber = 1
        // if(this.listQuery.start){
        //   this.listQuery.start = parseTime1(this.listQuery.start)
        //   // console.log(this.listQuery.end)
        // }else{
        //   this.listQuery.start = null
        // }
        // console.log(parseTime(this.listQuery.end))
        // console.log(parseTime(this.listQuery.end.toString()))
        // console.log(this.listQuery.end.toString())  
        // console.log(this.listQuery)
        this.getList()
      },
      handleSizeChange(val) {
        this.listQuery.pageSize = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.listQuery.pageNumber = val
        this.getList()
      },
      handleDelete(row) {
        let index = indexOfArray(row.name,this.list)
        this.$prompt('请输入删除原因', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          showInput: true,
          inputType: 'text',
          inputPlaceholder: '请输入内容',
        }).then(({ value }) => {
          let query = {
            id: row.id,
            status: 3,
            reason: value
          }
          updateStatus(query).then(res =>{
            console.log(res)
            this.list.splice(index,1)
            this.total = this.list.length
            this.$message({
              type: 'success',
              message: '删除成功',
              duration: 1500
            });
          }).catch(() => {
                  
          });
        }).catch(() => {
                  
        });
      },
      handleGoDetail(row){ 
        this.$router.push({ name: 'personDetail', params: { row: row }})
        // this.$router.push({ path: '/membermanage/personaldetail', query: { row: row }})
      },
      handleDownload() {
        require.ensure([], () => {
          const { export_json_to_excel } = require('vendor/Export2Excel')
          const tHeader = ['购买人', '流水金额','流水类型','订单号','商铺名','创建时间']
          const filterVal = ['username', 'price','type','orderNo','shopName','createDateName']
          const data = this.formatJson(filterVal, this.list)
          export_json_to_excel(tHeader, data, '流水表')
        })
      },
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => {
          if (j === 'timestamp') {
            return parseTime(v[j])
          } else {
            return v[j]
          }
        }))
      }
    }
  };
</script>
<style scoped>
    .input_edit{
        width: 200px;
        float: left;
        margin-right:10px;
    }
    .cell{
        padding: 0 5px !important;
        overflow: auto;
    }
    .filter-container {
      padding-bottom: 10px;
    }
    .filter-item {
      display: inline-block;
      vertical-align: middle;
      margin-bottom: 10px;
    }
    .avatar {
      width: 90px;
      height: 90px;
      /*border-radius: 50%;*/
      margin-top: 10px;
      margin-bottom: 10px;
      display: block;
    }
</style>
